<template>
    <div>
        <el-form ref="form" :model="Form" label-width="100px">
            <el-form-item label="选择时间：" prop="startTime">
                <el-date-picker
                        v-model="Form.startTime"
                        type="daterange"
                        format="yyyy-MM-dd "
                        value-format="yyyy-MM-dd"
                        clearable
                        align="right"
                        unlink-panels
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                </el-date-picker>
                <span>供应商：</span>
                <el-input v-model="supplierName" style="width: 150px;" clearable placol请der="输入内容"></el-input>
                <span >商品分类：</span>
                <el-input v-model="Form.goodsType" style="width: 150px;" clearable placeholder="请输入内容"></el-input>
                <!--弹窗框-->
                <el-dialog style="margin-left: 20px" title="添加退货" :visible.sync="dialogFormVisible" width="34%"
                           center>
                    <el-form ref="subForm" :rules='rules' :model="subForm" label-width="80px">
                        <el-form-item label="申请时间" prop="outTime">
                            <el-date-picker
                                    v-model="subForm.outTime"
                                    type="datetime"
                                    format="yyyy-MM-dd HH:mm:ss"
                                    value-format="yyyy-MM-dd HH:mm:ss"
                                    placeholder="选择日期时间"
                                    clearable
                                    @blur="getWarehouse">
                            </el-date-picker>
                        </el-form-item>
                        <br>
                        <el-form-item label="仓库" prop="warehouseName">
                            <el-select v-model="subForm.warehouseName" clearable placeholder="请选择"
                                       @change="getSupplier(subForm.warehouseName)">
                                <el-option
                                        v-for="item in subForm.select5"
                                        :key="item.warehouseId"
                                        :label="item.warehouseName"
                                        :value="item.warehouseId">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <br>
                        <el-form-item label="供应商" prop="supplierName">
                            <el-select v-model="subForm.supplierName" @blur.native.capture="getGoodsType" clearable
                                       placeholder="请选择">
                                <el-option
                                        v-for="item in subForm.select1"
                                        :key="item.supplierId"
                                        :label="item.supplierName"
                                        :value="item.supplierId">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <br>
                        <el-form-item label="商品分类" prop="goodsName">
                            <el-select v-model="subForm.goodsName" @blur.native.capture="getGoodsName" clearable
                                       placeholder="请选择">
                                <el-option
                                        v-for="item in subForm.select2"
                                        :key="item.goodsType"
                                        :label="item.goodsType"
                                        :value="item.goodsType">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <br>
                        <el-form-item label="商品名称" prop="goodsType">
                            <el-select v-model="subForm.goodsType" clearable @blur.native.capture="getGoodsNum"
                                       placeholder="请选择">
                                <el-option
                                        v-for="item in subForm.select3"
                                        :key="item.goodsName"
                                        :label="item.goodsName"
                                        :value="item.goodsName">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <br>
                        <el-form-item label="商品数量" prop="goodsNum">
                            <el-input style="width: 209px" v-model="subForm.goodsNum" :disabled="true"
                                      placeholder="请输入内容"
                                      maxLength='9'></el-input>
                            <span>件</span>
                        </el-form-item>
                        <br>
                        <el-form-item label="退货数量" prop="outNum">
                            <el-input style="width: 209px" v-model="subForm.outNum" placeholder="请输入内容"
                                      maxLength='9'></el-input>
                        </el-form-item>
                        <br>
                        <el-form-item label="单位" prop="goodsUnit">
                            <el-select v-model="subForm.goodsUnit" clearable @blur.native.capture="" placeholder="请选择">
                                <el-option
                                        v-for="(index,val) in subForm.select6"
                                        :key="val"
                                        :label="index"
                                        :value="index">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <br>
                        <el-form-item label="退货原因" prop="desc">
                            <el-input style="width: 209px" type="textarea" v-model="subForm.desc" :rows="2"></el-input>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取 消</el-button>
                        <el-button type="primary" @click="verification">确 定</el-button>
                    </div>
                </el-dialog>
            </el-form-item>
            <el-form-item label="商品名称：">

                <el-input v-model="Form.goodsName" style="width: 150px;" clearable placeholder="请输入内容"></el-input>
                <span>仓库名：</span>
                <el-input v-model="Form.warehouseName" style="width: 150px;" clearable placeholder="请输入内容"></el-input>
                <div class=" bound handler">
                    <el-button  type="primary" @click="select" icon="el-icon-search">搜索</el-button>
                    <el-button  type="primary" @click="dialogFormVisible=true">添加退货</el-button>
                </div>
            </el-form-item>
        </el-form>
        <div>
            <!--表格-->
            <el-table
                    :data="tableData"
                    style="width: 100%">
                <el-table-column
                        type="index"
                        :index="indexMethod"
                        width="50">
                </el-table-column>
                <el-table-column
                        prop="modifyTime"
                        label="申请时间"
                        width="160"
                >
                </el-table-column>
                <el-table-column
                        prop="supplierName"
                        label="供应商"
                >
                </el-table-column>
                <el-table-column
                        prop="goodsType"
                        label="商品分类"
                >
                </el-table-column>
                <el-table-column
                        prop="goodsName"
                        label="商品名称"
                >
                </el-table-column>
                <el-table-column
                        prop="returnNum"
                        label="退货数量"
                >
                </el-table-column>
                <el-table-column
                        prop="goodsUnit"
                        label="商品单位"
                >
                </el-table-column>
                <el-table-column
                        prop="stateType"
                        label="退货状态"
                >
                </el-table-column>
                <el-table-column
                        prop="returnPolicy"
                        label="退货原因"
                >
                </el-table-column>
                <el-table-column
                        prop="warehouseName"
                        label="仓库名"
                >
                </el-table-column>
                <el-table-column label="操作" width="180px">
                    <template slot-scope="scope">
                        <el-button
                                v-if="scope.row.stateType =='审核通过'"
                                size="mini"
                                type="warning"
                                @click="returnGoods(scope.$index, scope.row)">确认退货
                        </el-button>
                        <el-button
                                size="mini"
                                type="success"
                                @click="handleLook(scope.$index, scope.row)">查看
                        </el-button>

                        <!--查看弹窗-->
                        <el-dialog style="margin-left: 20px" title="查看详情" :visible.sync="dialogForm" width="34%"
                                   center>
                            <el-form ref="subForm" :rules='rules' :model="sbForm" label-width="100px">
                                <el-form-item label="申请时间" :label-width="formLabelWidth">
                                    <el-input v-model="sbForm.modifyTime" disabled></el-input>
                                </el-form-item>
                                <br>
                                <el-form-item label="供应商" :label-width="formLabelWidth" >
                                    <el-input v-model="sbForm.supplierName" disabled></el-input>
                                </el-form-item>
                                <br>
                                <br>
                                <el-form-item label="商品分类" :label-width="formLabelWidth" >
                                    <el-input   v-model="sbForm.goodsName" disabled></el-input>
                                </el-form-item>
                                <br>
                                <el-form-item label="商品名称" :label-width="formLabelWidth" >
                                    <el-input v-model="sbForm.goodsType" disabled></el-input>
                                </el-form-item>
                                <br>
                                <el-form-item label="出库数量" :label-width="formLabelWidth" >
                                    <el-input  v-model="sbForm.returnNum" disabled
                                    ></el-input>
                                </el-form-item>
                                <br>
                                <el-form-item label="单位" :label-width="formLabelWidth" >
                                    <el-input  v-model="sbForm.goodsUnit" disabled></el-input>
                                </el-form-item>
                                <br>
                                <el-form-item label="仓库" :label-width="formLabelWidth" >
                                    <el-input  v-model="sbForm.warehouseName" disabled></el-input>
                                </el-form-item>
                                <el-form-item label="退货原因" :label-width="formLabelWidth" >
                                    <el-input  v-model="sbForm.returnPolicy" disabled></el-input>
                                </el-form-item>
                            </el-form>

                        </el-dialog>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="block">
            <!--
            size-change：选择每页显示几行
            current-change：上一页 下一页
            current-page：当前页
            page-sizes：一页显示多少行的集合
            page-size：一页显示多少行
            total：总条数
                 -->
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page=page
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size=size
                    layout="total, sizes, prev, pager, next, jumper"
                    :total=total>
            </el-pagination>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'ReturnList',
        mounted() {//默认第一次加载
            initTable(this)
        },
        data() {
            return {
                supplierName: '',
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() > Date.now()
                    }
                },
                tableData: [],
                total: 0,
                page: 1,
                size: 5,
                dialogFormVisible: false,
                dialogForm:false,
                Form: {
                    startTime: '',
                    overTime: '',
                    goodsType:'',
                    goodsName:'',
                    warehouseName: '',
                },
                subForm: {
                    outTime: '',
                    supplierName: '',
                    goodsName: '',
                    goodsType: '',
                    goodsNum: '',
                    outNum: '',
                    warehouseName: '',
                    select1: [],
                    select2: [],
                    select3: [],
                    select5: [],
                    select6: [],
                    desc: ''

                },
                formLabelWidth:'120px',
                sbForm:{
                    modifyTime: '',
                    supplierName: '',
                    goodsType: '',
                    goodsName: '',
                    returnNum: '',
                    returnPolicy: '',
                    warehouseName: '',
                    goodsUnit: ''
                },
                rules: {
                    outTime: [
                        {
                            required: true,
                            message: '时间不能不选择',
                            trigger: 'blur'
                        }
                    ],
                    supplierName: [
                        {
                            required: true,
                            message: '供应商必须选',
                            trigger: ['blur', 'change']
                        }
                    ],
                    goodsName: [
                        {
                            required: true,
                            message: '商品的种类必须选',
                            trigger: ['blur', 'change']
                        }
                    ],
                    goodsType: [
                        {
                            required: true,
                            message: '商品的类型必须选',
                            trigger: ['blur', 'change']
                        }
                    ],
                    outNum: [
                        {
                            required: true,
                            message: '商品的类型必须选',
                            trigger: 'blur'
                        }
                    ],

                    desc: [
                        {
                            required: true,
                            message: '退货原因必须填写',
                            trigger: 'blur',
                        }
                    ],
                    warehouseName: [
                        {
                            required: true,
                            message: '仓库名必须选',
                            trigger: ['blur', 'change']
                        }
                    ],
                    goodsUnit: [
                        {
                            required: true,
                            message: '出库的单位必须选',
                            trigger: ['blur', 'change']
                        }
                    ]
                }
            }
        },
        methods: {
            select() {
                if (this.Form.startTime.toString().split(",")[0] == this.Form.startTime.toString().split(",")[1]) {
                    this.$message("温馨提示：开始日期和结束日期不能一致，请重新选择！")
                    return false
                }
                initTable(this)
            },
            //以下是表格部分的方法
            indexMethod(index) {
                return index + 1
            },
            handleSizeChange(val) {
                this.size = val
                initTable(this)
                console.log(`每页 ${val} 条`)
            },
            handleCurrentChange(val) {
                this.page = val
                initTable(this)
                console.log(`当前页: ${val}`)
            },
            //数据表格移除的方法
            handleDelete(index, row) {
                this.$confirm('是否执行此操作, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$axios.post('delReturnList', {
                        returnId: row.returnId,
                        stateListId: 3,
                    }).then(resp => {
                        if (resp.data == '移除成功') {
                            this.$message.success(resp.data)
                            initTable(this)
                            return false
                        }
                        this.$message.error(new Error(resp.data))
                    })
                }).catch(() => {
                    //几点取消的提示
                })

            },
            //确认退货按钮
            returnGoods(index, row) {
                if (row.stateType == '审核通过') {
                    this.$axios.post('sureReturnGoods', {
                        returnId: row.returnId,
                        stateListId: 3,
                        warehouseId: row.warehouseId,
                        supplierId: row.supplierId,
                        goodsType: row.goodsType,
                        goodsName: row.goodsName,
                        returnNum: row.returnNum
                    }).then(resp => {
                        if (resp.data == '退货成功') {
                            this.$message.success(resp.data)
                            initTable(this)
                            return false
                        }
                        this.$message.error(new Error(resp.data))
                    })
                } else {
                    this.$message.error(new Error('退货单状态为审核通过才能操作'))
                }
            },
            //以下是添加退货单的方法
            //自定义校验规则
            verification() {
                if (this.subForm.outTime == null || this.subForm.outTime === '') {
                    this.$message.error(new Error('时间不能不选择'))
                    return false
                }
                if (this.subForm.warehouseName == null || this.subForm.warehouseName === '') {
                    this.$message.error(new Error('仓库必须选取'))
                    return false
                }
                if (this.subForm.supplierName == null || this.subForm.supplierName === '') {
                    this.$message.error(new Error('供应商必须选'))
                    return false
                }
                if (this.subForm.goodsType == null || this.subForm.goodsType === '') {
                    this.$message.error(new Error('商品的分类必须选'))
                    return false
                }
                if (this.subForm.goodsName == null || this.subForm.goodsName === '') {
                    this.$message.error(new Error('商品的名称必须选'))
                    return false
                }

                if (this.subForm.outNum == null || this.subForm.outNum === '') {
                    this.$message.error(new Error('退货数量必须填写'))
                    return false
                } else {
                    let r = /^[1-9]\d*$/
                    if (!r.test(this.subForm.outNum)) {
                        this.$message.error(new Error('商品的数量必须为正整数(0除外)'))
                        return false
                    }
                }
                if (this.subForm.goodsUnit == null || this.subForm.goodsUnit === '') {
                    this.$message.error(new Error('出库的单位必选'))
                    return false
                }
                if (this.subForm.desc == null || this.subForm.desc === '') {
                    this.$message.error(new Error('退货原因必须填写'))
                    return false
                }

                //添加的数据发往后台
                this.$axios.post('addReturn', {
                    modifyTime: this.subForm.outTime,
                    supplierId: this.subForm.supplierName,
                    goodsType: this.subForm.goodsName,
                    goodsName: this.subForm.goodsType,
                    returnNum: this.subForm.outNum,
                    returnPolicy: this.subForm.desc,
                    warehouseId: this.subForm.warehouseName,
                    goodsUnit: this.subForm.goodsUnit
                }).then(resp => {
                    if (resp.data == '提交成功') {
                        this.$message.success(resp.data)
                        this.dialogFormVisible = false
                        initTable(this)
                        this.$refs['subForm'].resetFields()
                    } else {
                        this.$message.error(new Error(resp.data))
                    }
                })

            },
            //获取供应商的方法
            getSupplier(val) {
                // alert(val)
                this.$axios.post('outGetSupplier', {
                    warehouseId: val
                }).then(resp => {
                    if (resp) {
                        // console.log(resp.data.supplierList)
                        this.subForm.select1 = resp.data.supplierList
                        // console.log(this.subForm.select1)
                    }
                })
            },
            //获得商品的种类
            getGoodsType() {
                // alert(this.subForm.supplierName)
                this.$axios.post('outGtGoodsType', {
                    supplierId: this.subForm.supplierName,
                    warehouseId: this.subForm.warehouseName
                }).then(resp => {
                    if (resp) {
                        // console.log(resp.data.goodsList)
                        this.subForm.select2 = resp.data.goodsTypeList

                    }
                })
            },
            //获得商品的名称
            getGoodsName() {
                // alert(this.subForm.goodsName)
                this.$axios.post('OutGetGoodsName', {
                    goodsType: this.subForm.goodsName,
                    supplierId: this.subForm.supplierName,
                    warehouseId: this.subForm.warehouseName
                }).then(resp => {
                    if (resp) {
                        // console.log(resp.data.goodsList)
                        this.subForm.select3 = resp.data.goodsList
                        this.subForm.select6 = resp.data.goodsUnit
                        console.log(this.subForm.select6)
                    }
                })
            },
            //获取出库前的商品数量的方法：
            getGoodsNum() {
                // alert(this.subForm.warehouseName)
                // alert(this.subForm.goodsName)
                this.$axios.post('outGetGoodsNum', {
                    goodsName: this.subForm.goodsType,
                    supplierId: this.subForm.supplierName,
                    warehouseId: this.subForm.warehouseName,
                    goodsType: this.subForm.goodsName
                }).then(resp => {
                    if (resp) {
                        this.subForm.goodsNum = resp.data.dataNum
                    }
                })
            },
            //获取仓库的方法
            getWarehouse(val) {
                this.$axios.post('OutGetWarehouseName', {}).then(resp => {
                    if (resp) {
                        this.subForm.select5 = resp.data.warehouseNameList
                        // alert(resp.data.warehouseNameList.data.warehouseName)
                    }
                })
            },
            //查看详情
            handleLook(index,row){
                this.dialogForm=true
                this.sbForm.supplierName=row.supplierName
                this.sbForm.modifyTime=row.modifyTime
                this.sbForm.goodsType=row.goodsType
                this.sbForm.goodsName=row.goodsName
                this.sbForm.goodsUnit=row.goodsUnit
                this.sbForm.returnNum=row.returnNum
                this.sbForm.warehouseName=row.warehouseName
                this.sbForm.returnPolicy=row.returnPolicy
            }
        }
    }

    function initTable($this) {
        $this.$axios.post('getReturnList', {
            page: $this.page,
            size: $this.size,
            startTime: $this.Form.startTime.toString().split(',')[0],
            overTime: $this.Form.startTime.toString().split(',')[1],
            supplierName: $this.supplierName,
            goodsType:$this.Form.goodsType,
            goodsName:$this.Form.goodsName,
            warehouseName: $this.Form.warehouseName,

        }).then(resp => {
            if (resp) {
                $this.tableData = resp.data.returnList
                $this.total = resp.data.count
            }
        })
    }

</script>

<style scoped>
    .bound{
        margin-left: 10px;
    }
    .handler{
        display: inline-block;
    }
</style>
